<template>
  <div class="user-container" style="background-color: rgba(0,0,0,0.05); padding-bottom: 75px;">
    <div class="user h-[30vh] flex flex-col justify-center items-center">
      <van-image
        @click="
          showImagePreview([userStore.userInfo?.avatarUrl || defaultAvatarUrl])
        "
        round
        width="30vw"
        height="30vw"
        :src="userStore.userInfo?.avatarUrl || defaultAvatarUrl"
      >
        <template v-slot:error>加载失败</template>
      </van-image>
      <div class="mt-[8px] font-bold text-[16px]">
        {{ userStore.userInfo?.nickname || "测试" }}
      </div>
    </div>
    <div class="card">
      <div class="main-container flex justify-around mt-[30px]">
        <div
          v-for="item in navList"
          :key="item.path"
          class="flex flex-col justify-center items-center"
          @click="router.push(item.path)"
        >
          <SvgIcon :name="item.icon" size="50" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="card" style="background-color: white">
      <div>
        <div style="display: flex; justify-content: space-between" @click="router.push('/myRoom/setting')">
          <div style="line-height: 40px; height: 40px; margin-left: 10px;">&nbsp;<el-icon><Setting /></el-icon>&nbsp;设置</div>
          <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
        </div>
        <hr />
        <div style="display: flex; justify-content: space-between" @click="onSweep">
          <div style="line-height: 40px; height: 40px; margin-left: 10px;">&nbsp;<el-icon><Wallet /></el-icon>&nbsp;钱包</div>
          <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
        </div>
        <hr />
        <div style="display: flex; justify-content: space-between" @click="onSweep">
          <div style="line-height: 40px; height: 40px; margin-left: 10px;">&nbsp;<el-icon><ChatDotRound /></el-icon>&nbsp;消息中心</div>
          <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
        </div>
        <hr />
        <div style="display: flex; justify-content: space-between" @click="onSweep">
          <div style="line-height: 40px; height: 40px; margin-left: 10px;">&nbsp;<el-icon><User /></el-icon>&nbsp;人工客服</div>
          <div style="line-height: 40px; height: 40px;"><el-icon><ArrowRightBold /></el-icon>&nbsp;&nbsp;</div>
        </div>
        <hr />
      </div>
    </div>
    <!--    <div>-->
    <!--      <van-button type="primary" class="w-[50vw] go-out" @click="logoutHandle">退出登录</van-button>-->
    <!--    </div>-->
    <!--    <div class="editor" @click="editorUser">编辑</div>-->
  </div>
</template>
<script setup lang="ts" name="UserCenter">
import { useUserStore } from "@/store/modules/user";
import { showImagePreview } from "vant";
import defaultAvatarUrl from "../../../public/favicon.ico";
import { Wallet, ArrowRightBold, ChatDotRound, Setting, User } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
console.log("router.currentRoute.value.path", router);
const navList = ref([
  {
    icon: "历史",
    name: "浏览历史",
    path: "/browsingHistory"
  },
  {
    icon: "预约",
    name: "我的预约",
    path: "/myAppointment"
  },
  {
    icon: "合同",
    name: "我的租约",
    path: "/myAgreement"
  }
]);
const userStore = useUserStore();
// 退出登陆
const logoutHandle = () => {
  userStore.Logout();
  // 清空路由浏览历史记录
  router.replace("/");
};
console.log(userStore);
// 功能尚未完成
const onSweep = () => {
  ElMessage.warning("敬请期待~");
};
onMounted(() => {
  userStore.GetInfoAction();
});
</script>

<style scoped lang="less">
.user {
  background: var(--van-primary-background-color);
}
.editor {
  position: absolute;
  margin-top: -635px;
  margin-left: 10px;
  z-index: 999;
}
.payinfo {
  width: 330px;
  position: absolute;
  margin-left: -160px;
  border-bottom: 0.5px solid #ccc;
}
.go-out {
  margin-left: 25%;
  margin-top: 25%;
}
</style>
